const OrderManagement = () => {
  const orders = [
    { id: "20231001001", customer: "张三", date: "2023-10-01", amount: 2999, status: "已发货" },
    { id: "20231001002", customer: "李四", date: "2023-10-01", amount: 1899, status: "待发货" },
    { id: "20231001003", customer: "王五", date: "2023-09-30", amount: 899, status: "已完成" },
    { id: "20231001004", customer: "赵六", date: "2023-09-29", amount: 3599, status: "已取消" },
    { id: "20231001005", customer: "孙七", date: "2023-09-28", amount: 4299, status: "待付款" },
  ];

  const statusOptions = ["全部", "待付款", "待发货", "已发货", "已完成", "已取消"];

  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold mb-8">订单管理</h1>
      
      {/* Filters */}
      <div className="bg-white rounded-lg shadow-md p-6 mb-8">
        <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
          <div>
            <label className="block text-gray-700 mb-2">订单号</label>
            <input 
              type="text" 
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="搜索订单号"
            />
          </div>
          <div>
            <label className="block text-gray-700 mb-2">客户姓名</label>
            <input 
              type="text" 
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="搜索客户姓名"
            />
          </div>
          <div>
            <label className="block text-gray-700 mb-2">下单时间</label>
            <input 
              type="date" 
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
          <div>
            <label className="block text-gray-700 mb-2">订单状态</label>
            <select className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
              {statusOptions.map((status, index) => (
                <option key={index} value={status}>{status}</option>
              ))}
            </select>
          </div>
          <div className="flex items-end">
            <button className="w-full bg-gray-200 text-gray-800 font-semibold py-2 px-4 rounded-lg hover:bg-gray-300 transition duration-300">
              重置
            </button>
            <button className="w-full ml-2 bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300">
              搜索
            </button>
          </div>
        </div>
      </div>
      
      {/* Order Table */}
      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-100">
              <tr>
                <th className="text-left py-3 px-4">订单号</th>
                <th className="text-left py-3 px-4">客户</th>
                <th className="text-left py-3 px-4">下单时间</th>
                <th className="text-right py-3 px-4">订单金额</th>
                <th className="text-left py-3 px-4">状态</th>
                <th className="text-right py-3 px-4">操作</th>
              </tr>
            </thead>
            <tbody>
              {orders.map((order, index) => (
                <tr key={index} className="border-b hover:bg-gray-50">
                  <td className="py-3 px-4 font-medium">#{order.id}</td>
                  <td className="py-3 px-4">{order.customer}</td>
                  <td className="py-3 px-4">{order.date}</td>
                  <td className="py-3 px-4 text-right">¥{order.amount}</td>
                  <td className="py-3 px-4">
                    <span className={`px-2 py-1 rounded text-sm ${
                      order.status === "已完成" 
                        ? "bg-green-100 text-green-800" 
                        : order.status === "已发货" 
                          ? "bg-blue-100 text-blue-800" 
                          : order.status === "待发货" 
                            ? "bg-yellow-100 text-yellow-800" 
                            : order.status === "待付款" 
                              ? "bg-gray-100 text-gray-800" 
                              : "bg-red-100 text-red-800"
                    }`}>
                      {order.status}
                    </span>
                  </td>
                  <td className="py-3 px-4 text-right">
                    <div className="flex justify-end space-x-2">
                      <button className="text-blue-500 hover:text-blue-700">
                        查看详情
                      </button>
                      <button className="text-gray-500 hover:text-gray-700">
                        修改状态
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        
        {/* Pagination */}
        <div className="p-4 flex justify-between items-center">
          <div className="text-gray-600">
            显示 1 到 {orders.length} 条，共 {orders.length} 条记录
          </div>
          <div className="flex gap-2">
            {[1].map((page) => (
              <button
                key={page}
                className={`w-10 h-10 rounded-full ${
                  page === 1 
                    ? "bg-blue-500 text-white" 
                    : "bg-gray-200 text-gray-700 hover:bg-gray-300"
                }`}
              >
                {page}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default OrderManagement;